<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
        * {
            box-sizing: border-box;
            list-style:none;
        }
        html,body,ul,li {
            margin:0;
            padding:0;
            border:0;
            font-size:16px;
        }
        #wrapper {
            width:250px;
            height:100px;
            background:#333;
            margin:10px auto;
            padding:40px 0;
            text-align:center;
            color: white;
            font-weight:900;
        }
        span {
            width:50px;
            color:#333;
            background:white;
            border:2px solid #ccc;
            margin:0 10px;
            padding:0 10px;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <span></span>点<span></span>分<span></span>秒
</div>
</body>
</html>
<script>
    window.onload = function () {
        var a = document.getElementById("wrapper");
        var b = a.getElementsByTagName("span");
        setInterval(getTimes, 1000);
        getTimes();
        function getTimes() {
            var oDate = new Date();
            var aDate = [oDate.getHours(), oDate.getMinutes(), oDate.getSeconds()];
            for (var i in aDate) b[i].innerHTML = aDate[i];
        }
    }
</script>

